<template>
    <H2>酒店信息表</H2><br>
    门店名称:<input type="text" placeholder="请输入门店名称" v-model="a.shopname"/>
    门店状态:<select v-model="a.shpoState">
        <option value="">--请选择--</option>
        <option :value="true">--请选择--</option>
        <option :value="false">--请选择--</option>
    </select>
    <input type="button" value="查询" class="btn btn-info" @click="showshop"/>&emsp;
    <input type="button" value="添加门店" class="btn btn-success" @click="addshop"/>&emsp;
    <input type="button" value="批量营业" class="btn btn-danger" @click="UpdStatearr"/>&emsp;
    <input type="button" value="批量歇业" class="btn btn-dark" @click="UpdStatearr"/>
    <table class="table table-bordered" border="1px">
        <thead>
            <tr>
                <td><input type="checkbox" v-model="flag" @change="checkall"/></td>
                <td>门店名称</td>
                <td>分店名称</td>
                <td>门店地址</td>
                <td>门店电话</td>
                <td>门店状态</td>
                <td>门店介绍</td>
                <td>入住须知</td>
                <td>交通信息</td>
                <td>创建时间</td>
                <td>门头图片</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in Info">
                <td><input type="checkbox" :checked="IsChecked" :value="item.Shop_Id" v-model="arrids" @change="Iner"/></td>
                <td>{{ item.Shop_Name }}</td>
                <td>{{ item.Shop_BranchName }}</td>
                <td>{{ item.Shop_Address }}</td>
                <td>{{ item.Shop_Phone }}</td>
                <td v-if="item.Shpo_State==true" style="color:green;">营业中</td>
                <td v-if="item.Shpo_State==false" style="color:red;">休息中</td>
                <td>{{ item.Shop_Info }}</td>
                <td>{{ item.Shop_Notice }}</td>
                <td>{{ item.Shop_Traffic }}</td>
                <td>{{ moment(item.Shop_Date).format("YYYY年MM月DD日")}}</td>
                <td>
                    <img :src="item.Shop_Img" style="width: 80px;height: 88px;"/>
                </td>
                <td>
                    <input v-if="item.Shpo_State==true"  type="button" value="歇业" class="btn btn-info" @click="UpdState(item.Shop_Id,0)"/>
                    <input v-if="item.Shpo_State==false"  type="button" value="营业" class="btn btn-success" @click="UpdState(item.Shop_Id,1)"/>&emsp;
                    <input type="button" value="删除" class="btn btn-danger" @click="Delshop(item.Shop_Id)"/>&emsp;
                    <input type="button" value="修改" class="btn btn-info" @click="Updshop(item.Shop_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共&emsp;{{ pageInfo.totalCount }}&emsp;条,每页显示&emsp;{{ pageInfo.size }}&emsp;条
        当前第&emsp;{{ pageInfo.index }}/{{ pageInfo.pagecount }} &emsp;
        <a href="#" @click="pageLoadINfo('F')">首页</a>&emsp;
        <a href="#" @click="pageLoadINfo('U')">上一页</a>&emsp;
        <a href="#" @click="pageLoadINfo('D')">下一页</a>&emsp;
        <a href="#" @click="pageLoadINfo('E')">尾页</a>
        <select v-model="newsize" @change="ChangeSize">
            <option value="1">1条/页</option>
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="6">6条/页</option>
        </select>&emsp;
        <input type="text" style="width: 40px;" v-model="newIndex">
        <input type="button" value="跳转" @click="TakePartInfo">
    </span>


</template>

<script setup lang="ts">
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import { onMounted,ref } from 'vue';
import moment from 'moment';
const router=useRouter();

onMounted(()=>{
    showshop();
})
//创建响应式数据完成全选 反选
const flag=ref(false);   //标题栏选中状态
const IsChecked=ref(false);  //数据表选中状态
const arrids=ref([]);
//全选方法
const checkall=()=>{
    //判断标题栏是否选中
    if(flag.value){
        IsChecked.value=true;
        //保存所有选中的数据编号并赋值给新数组
        arrids.value=Info.value.map((item:any)=>{
            return item.Shop_Id
            
        })
    }else{
        IsChecked.value=false
        arrids.value=[];
    }
    alert(arrids.value)
}
//反选方法
const Iner=()=>{
    //判断数据总长度和保存编号的新数组长度是否一致
    if(Info.value.length==arrids.value.length){
        flag.value=true;
    }else{
        flag.value=false;
    }
}

//分页方法
const pageLoadINfo=(choose:string)=>{
    switch(choose)
    {
        case "F":
        pageInfo.value.index=1;
        break;
        case "U":
            if(pageInfo.value.index>1){
                pageInfo.value.index--;
            }else{
                alert("当前已经是第一页")
            }
        pageInfo.value.index=1;
        break;
        case "D":
        if(pageInfo.value.index<pageInfo.value.pagecount){
                pageInfo.value.index++;
            }else{
                alert("当前已经是最后一页")
            }
        break;
        case "E":
        pageInfo.value.index=pageInfo.value.pagecount

    }
    showshop();
}
//修改页容量
const newsize=ref(2)
const ChangeSize=()=>{
    pageInfo.value.index=1;
    pageInfo.value.size=newsize.value;
    showshop();
}
//创建响应式数据保存跳转按钮的数据
const newIndex=ref("")

//完成跳转页效果
const TakePartInfo=()=>{
    //获取用户在文本旷工输入的数据
    var nIndex=newIndex.value
    //输入内容非空判断
    if(nIndex==""){
        alert("请输入要跳转的页数")
        newIndex.value=""
        return;
    }
    if(isNaN(Number(nIndex))){
        alert('只能输入数字')
        newIndex.value=""
        return;
    }
    if(Number(nIndex)<1){
        alert('跳转页码必须大于1')
         newIndex.value=""
        return;
    }
    if(Number(nIndex)>pageInfo.value.pagecount){
        alert('不能大于总页数');
         newIndex.value=""
        return
    }
    pageInfo.value.index=Number(nIndex)
    showshop();
    newIndex.value=""

}

//创建响应式数据完成分页
const pageInfo=ref({
    index:1,
    size:2,
    totalCount:0,
    pagecount:0
})

//创建响应式数据完成查询
const a=ref({
    shopname:"",
    shpoState:""
})

//创建响应式数据用于保存门店信息
const Info:any=ref([{
    "Shop_Id": 0,
    "Shop_Name": "",
    "Shop_BranchName": "",
    "Shop_Address": "",
    "Shop_Phone": "",
    "Shpo_State": true,
    "Shop_Info": "",
    "Shop_Notice": "",
    "Shop_Traffic": "",
    "Shop_Img": "",
    "Shop_Date":""
}])
//显示门店信息
const showshop=()=>{
    axios.get("https://localhost:7035/api/Shop/ShowShopInfo",
        {
            params:{
                sname:a.value.shopname,
                shopstate:a.value.shpoState,
                index:pageInfo.value.index,
                size:pageInfo.value.size
            }
        }
    )
    .then(res=>{
        Info.value=res.data.PageData
        //依次获取数据总数,总页数
        pageInfo.value.totalCount=res.data.TotalCount
        pageInfo.value.pagecount=res.data.PageCount
    })
}
//跳转到修改页
const Updshop=(Shop_Id:number)=>{
    router.push({
        name:"UpdShop",
        params:{
            id:Shop_Id
        }
    })
}
//跳转到添加门店页面
const addshop=()=>{
    router.push("/AddShop")
}
//修改状态
const UpdState=(shop_id:number,state:number)=>{
    if(!confirm("确认修改吗?"))
    {
        return;
    }
        axios.put("https://localhost:7035/api/Shop/UpdState?id="+shop_id +'&state='+state)
        .then(res=>{
            if(res.data>0)
        {
            alert('等级状态更新成功');
            showshop();
        }
        else{
            alert('等级状态更新失败');
        }
        })
}
//批量修改状态
const UpdStatearr=()=>{
    if(arrids.value.length==0){
        alert("未选中")
        return;
    }
    if(!confirm("确认修改吗?"))
    {
        return;
    }
        axios.put("https://localhost:7035/api/Shop/ChangeShopState?ids="+arrids.value.toString())
        .then(res=>{
            if(res.data>0)
        {
            alert('等级状态更新成功');
            showshop();
        }
        else{
            alert('等级状态更新失败');
        }
        })
}
//删除
const Delshop=(Shop_id:number)=>{
    if(confirm("确认删除吗?")){
        alert("方法没写")
        axios.delete("")
    }
   
}


</script>